<template>
  <!-- <el-button @click="changeComponentNext">Default</el-button> -->
    <div class="page-container">
      <div class="page-head">
      <div class="page-title">
          <p>
            <span style="font-family: '华文行楷', sans-serif;color: #1ABC9C;">数字迎新服务平台</span>
            <span style="font-family: '微软雅黑', sans-serif;"> | 账号激活</span>
          </p>
      </div>
      <div class="content-head">
        <el-steps :active="componentIndex" finish-status="success" align-center>
          <el-step title="身份校验"></el-step>
          <el-step title="设置密码"></el-step>
          <el-step title="完成设置"></el-step>
        </el-steps>
      </div>
    </div>
      <div class="content-body">
        <component :is="currentComponent" @nextPage="changeComponentNext" @prepage="changeComponentPre"></component>
      </div>
    </div>
  </template>
  
  <script lang="js">
  import { defineAsyncComponent } from 'vue'
const Register_check = defineAsyncComponent(() => import('../../components/resgister/RegisterView1.vue'))
const Register_confirm = defineAsyncComponent(() => import('../../components/resgister/RegisterView3.vue'))
const Register_next = defineAsyncComponent(() => import('../../components/resgister/RegisterView4.vue'))
  export default {
    components:{
        Register_check,Register_confirm,Register_next
    },
    data(){

        return {
            currentComponent: null,
            componentIndex:0,
        }
  
    },
    methods:{
        changeComponentPre() {
          // console.log('45456456654')
          console.log(this.currentComponent)
            if (this.componentIndex === 2) {
                this.currentComponent = Register_confirm
                this.componentIndex = 1
            } else if (this.componentIndex === 1) {
                this.currentComponent = Register_check
                this.componentIndex = 0
            }
        },
        changeComponentNext() {
          // console.log('45456456654')
          console.log(this.currentComponent)
            if (this.componentIndex === 0) {
                this.currentComponent = Register_confirm
                this.componentIndex = 1
            } else if (this.componentIndex === 1) {
                this.currentComponent = Register_next
                this.componentIndex = 2
            } else {
                this.currentComponent = Register_check
                this.componentIndex = 0
            }
            
        },

    },
    mounted(){
        this.currentComponent = Register_check;
    }
}
  </script>
  
  <style scoped lang="less">
  .page-container {
    width: 100vw;
    height: 100vh;
    .page-head{
      display: flex;
      background-color: rgb(242, 242, 242);
      flex-wrap:wrap;
    .page-title{
    top: 13px;
    width: 260px; 
    height: 58px;
    box-sizing: border-box;
    border-width: 2px;
    border-style: solid;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    font-size: 20px;
  }
     .content-head{
      width: 100%;
      padding: 20px 30px;
      box-sizing: border-box;
     }
    }
     .content-body{
      position: absolute;
      width: 300px;
      top: 55%;
      left: 50%;
      transform: translate(-50%,-50%);
     }
  }

 
  </style>
  